<template>
	<view>
		<view class="flex-col page">
			<view class="flex-col justify-start items-center relative section" >
				<image class="shrink-0 image"
					src="http://jianshanshuzipingtai.oss-cn-chengdu.aliyuncs.com/2025/01/02/0c2ecd5e34e44d1facb0d2aac702d73a.png" />
				<view class="" style="height: 60rpx;"></view>
				<text class="text_3 pos_8" >活动汇总</text>
				<view class="" style="margin-bottom: -60rpx;">
					<text class="font_2 pos_11">{{integral}}积分 已参加{{totle}}个活动</text>
				</view>

				<text class="font_3 text_6 pos_15">·</text>
				<text class="font_3 text_7 pos_16">
					走出家门，户外撒野，亲近自然尽情放松，在外狂野、狂欢、呐喊，体验无拘束的快乐。可以一个人安静的发痕、也可以三五好友狂欢不归宿、还可以一群陌友………总之，来吧!一起去野
				</text>
				<image @click="back" class="shrink-0 image_5 pos_7" v-if="sheShow==1"
					src="http://jianshanshuzipingtai.oss-cn-chengdu.aliyuncs.com/2025/01/02/b7fed2ccd7a14648b9664763b22d6749.png" />
				<view class="flex-col justify-start text-wrapper pos_5" v-if="sheShow==1"> <text class="text_2">活动列表</text></view>
			</view>
			<view class="flex-col justify-start relative section_2">
				<view class="flex-col">
					<view class="flex-col section_3">
						<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
					</view>
					<view class="flex-col list" v-if="items.length>0" style="margin-bottom: 30rpx;">
						<view class="flex-row list-item mt-16"  v-for="(item, index) in items" :key="index" @click="todate(item)">
							<view class="flex-col justify-start items-center image-wrapper_1">
								<image class="shrink-0 image-wrapper_1" :src="item.url" />
							</view>
							<view class="flex-col flex-1 group_3 ml-12">
								<text class="self-start font text_11">{{item.startTime}}</text>
								<text class="self-start font_4 text_12">{{item.name}}</text>
								<view class="flex-row items-center self-stretch group_1">
									<image class="image_8"
										src="http://jianshanshuzipingtai.oss-cn-chengdu.aliyuncs.com/2025/01/02/d19165fd13d94e07a6765b82cf7051d7.png" />
									<text class="font_6 ml-5">{{item.address}}</text>
								</view>
								<view class="flex-row justify-between items-center self-stretch group_5">
									<view class="flex-row items-center">
										<image class="shrink-0 image_9"
											src="http://jianshanshuzipingtai.oss-cn-chengdu.aliyuncs.com/2025/01/02/5d68ba7028854fca97d635ca8f1a36a7.png" />
										<text class="font_7 text_13 ml-5">+{{item.activityPoints}}</text>
									</view>
									<view class="flex-col justify-start items-center text-wrapper_2" v-if="item.status===''" >
										<text class="font_8">去参加</text>
									</view>
									<view class="flex-col justify-start items-center text-wrapper_2" v-if="item.status===0">
										<text class="font_8">待提交</text>
									</view>
									<view class="flex-col justify-start items-center text-wrapper_2" v-if="item.status==1">
										<text class="font_8">待审核</text></view>
									<view class="flex-col justify-start items-center text-wrapper_2" v-if="item.status==2">
										<text class="font_8">已完成</text></view>
									<view class="flex-col justify-start items-center text-wrapper_2" v-if="item.status==3">
										<text class="font_8">已驳回</text></view>
								</view>
							</view>
						</view>
					</view>
					<view style="width:750rpx;height: 60vh;display: flex;justify-content: center;align-items: center;"
						v-else>
						<view>
							<u-empty mode="list" icon="info-circle">
							</u-empty>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				show:true,
				items: [],
				list: [{
					name: '全部'
				}, {
					name: '待提交'
				}, {
					name: '待审核',
				}, {
					name: '已完成',
				}, {
					name: '已驳回',
				}],
				current: 0,
				pageSize: 1,
				typeId: '',
				cont: '',
				totle:'',
				integral:0,
				sheShow: 0,
			};
		},

		created() {
			this.sheShow = uni.getStorageSync("sheShow");
			this.cread()
			this.zongHuodong()
		},
		methods: {
			todate(e){
				uni.navigateTo({
					url:'/pages/ziyuan/ziyuanDate/ziyuanDate?id='+e.id
				})
			},
			async zongHuodong(){
				let res = await this.$request('kehu/jiajiaCharityActivities/list', {
					status: 2
				}, 'post')
				let res1 = await this.$request('kehu/user/info')
				this.totle = res.total
				this.integral = res1.data.integral
			},
			//请求活动
			async cread() {
				let res = await this.$request('kehu/jiajiaCharityActivities/list', {
					status: this.cont
				}, 'post')
				this.items = res.rows
			},
			back() {
				uni.navigateBack()
			},
			change(item) {
				console.log(item)
				this.current = item
				if (item == 0) {
					this.cont = ''
				} else {
					this.cont = item - 1
				}
				this.cread()
			},
		},
	};
</script>

<style scoped>
	.ml-5 {
		margin-left: 10rpx;
	}

	.page {
		background-color: #f8f8f8;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		overflow: hidden;
	}

	.image {
		width: 100vw;
		height: 65.8667vw;
	}

	.text_3 {
		color: #333333;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 30.24rpx;
	}

	.pos_8 {
		position: absolute;
		left: 33.34rpx;
		top: 209.32rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.4rpx;
		color: #333333;
	}

	.text_4 {
		color: #2869fe;
		line-height: 22.18rpx;
	}

	.pos_9 {
		position: absolute;
		left: 209.3rpx;
		top: 216.28rpx;
	}

	.image_8 {
		width: 28rpx;
		height: 28rpx;
	}

	.pos_10 {
		position: absolute;
		left: 304rpx;
		top: 214rpx;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: DIN;
		line-height: 20.28rpx;
		color: #333333;
	}

	.pos_11 {
		position: absolute;
		left: 33.92rpx;
		bottom: 205.84rpx;
	}

	.pos_12 {
		position: absolute;
		left: 84.84rpx;
		bottom: 205.34rpx;
	}

	.pos_13 {
		position: absolute;
		left: 221.84rpx;
		bottom: 205.84rpx;
	}

	.text_5 {
		line-height: 22.04rpx;
	}

	.pos_14 {
		position: absolute;
		left: 256.86rpx;
		bottom: 205.56rpx;
	}

	.text_6 {
		line-height: 3.48rpx;
	}

	.pos_15 {
		position: absolute;
		left: 198.24rpx;
		bottom: 214.92rpx;
	}

	.text_7 {
		color: #000000;
		font-size: 22rpx;
		line-height: 36rpx;
	}

	.pos_16 {
		position: absolute;
		left: 32.64rpx;
		right: 35.36rpx;
		top: 304.8rpx;
	}

	.image_4 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.pos_3 {
		position: absolute;
		right: 31.34rpx;
		top: 32.66rpx;
	}

	.image_3 {
		width: 30rpx;
		height: 22rpx;
	}

	.pos_2 {
		position: absolute;
		right: 90rpx;
		top: 32.66rpx;
	}

	.image_2 {
		width: 34rpx;
		height: 22rpx;
	}

	.pos {
		position: absolute;
		right: 130rpx;
		top: 33.34rpx;
	}

	.text {
		color: #333333;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 22.26rpx;
	}

	.pos_4 {
		position: absolute;
		left: 67.82rpx;
		top: 36.82rpx;
	}

	.image_5 {
		width: 48rpx;
		height: 48rpx;
	}

	.pos_7 {
		position: absolute;
		left: 24rpx;
		top: 108rpx;
	}

	.text-wrapper {
		padding: 14.56rpx 0 16.04rpx;
		border-radius: 32rpx;
	}

	.pos_5 {
		position: absolute;
		left: 50%;
		top: 100rpx;
		transform: translateX(-50%);
	}

	.text_2 {
		color: #333333;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 33.4rpx;
	}

	.group {
		padding: 16rpx 24rpx 14rpx 26rpx;
		border-radius: 32rpx;
		width: 174rpx;
		border: solid 1rpx #333333;
	}

	.pos_6 {
		position: absolute;
		right: 12rpx;
		top: 100rpx;
	}

	.image_7 {
		width: 36rpx;
		height: 12rpx;
	}

	.image_6 {
		width: 32rpx;
		height: 32rpx;
	}

	.section_2 {
		margin: -48rpx 0 -10rpx;
		background-color: #ffffff;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		overflow: hidden;
	}

	.section_3 {
		padding-left: 33.26rpx;
		padding-right: 28.48rpx;
		background-color: #ffffff;
	}

	.group_2 {
		padding: 33.02rpx 0 32.84rpx;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26.1rpx;
		color: #999999;
	}

	.text_8 {
		color: #333333;
		font-weight: 700;
		line-height: 26.06rpx;
	}

	.text_9 {
		line-height: 25.78rpx;
	}

	.text_10 {
		line-height: 25.78rpx;
	}

	.section_4 {
		margin-left: 24.74rpx;
		background-color: #2869fe;
		width: 60rpx;
		height: 2rpx;
	}

	.list {
		padding: 24rpx 32rpx 0;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.image-wrapper_1 {
		border-radius: 12.8rpx;
		overflow: hidden;
		width: 296rpx;
		height: 200rpx;
	}

	.group_3 {
		margin-top: 8.18rpx;
		margin-bottom: 2rpx;
	}

	.font {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.4rpx;
		color: #999999;
	}

	.text_11 {
		line-height: 22.3rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26.1rpx;
		color: #000000;
	}

	.text_12 {
		margin-top: 26.48rpx;
	}

	.group_1 {
		margin-top: 22.94rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.4rpx;
		color: #666666;
	}

	.group_5 {
		margin-top: 12rpx;
	}

	.image_9 {
		width: 36rpx;
		height: 40rpx;
	}

	.font_7 {
		font-size: 32rpx;
		font-family: DIN;
		line-height: 22.4rpx;
		color: #666666;
	}

	.text_13 {
		line-height: 23.16rpx;
	}

	.text-wrapper_2 {
		padding: 14.28rpx 0 15.32rpx;
		background-color: #2869fe;
		border-radius: 46rpx;
		width: 120rpx;
		height: 52rpx;
	}

	.font_8 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.4rpx;
		color: #ffffff;
	}
</style>